<template>
  <div>{{ a }}</div>
  <button @click="add">click add me</button>
  <div>count：{{ count }} -- {{ sumWithRootCount }}</div>
  <button @click="increment">click add me</button>
  <button @click="incrementIfOddOnRootSum">incrementIfOddOnRootSum</button>
  <div>page: {{ page }} <br/> {{ profile }}</div>
  <button @click="globalAction">click globalAction</button>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    // 普通写法
    ...mapState({
      a: state => state.moduleA.count
    }),
    // 或者
    ...mapState('moduleA', {
      count: state => state.count,
      page: state => state.myPage.page // 访问嵌套模块 modules 中state中属性
    }),
    ...mapGetters('moduleA', [
      'sumWithRootCount',
      'profile' // 访问嵌套模块中 getters
    ])
  },
  methods: {
    ...mapMutations('moduleA', [
      'increment'
    ]),
    ...mapActions('moduleA', [
      'incrementIfOddOnRootSum'
    ]),
    // 普通写法
    ...mapActions({
      'add': 'moduleA/incrementIfOddOnRootSum'
    }),
    ...mapActions([
      'globalAction'
    ])
  }
}
</script>

<style>

</style>